<template>
  <div class="cms-views-container bg-[#f6f8fb]">
    <!-- 标题栏 -->
    <CmsVideoHeader
      :title="'图集'"
      showSearch
      :text="{ color: '#48494D', backgroundColor: 'white' }"
      @click="handleClick('titleTabbar')"
      :class="{ 'component-selected': select === 'titleTabbar' }"
    />
    <!-- 分类宫格 -->
    <CmsCategoryGrid
      :type="1"
      :typeView="'atlas'"
      @click="handleClick('categoriesGrid')"
      :class="{ 'component-selected': select === 'categoriesGrid' }"
    />
    <!-- 免费阅读 -->
    <CmsRecommendGrid
      :type="1"
      :title="'免费阅读'"
      @click="handleClick('freeAtlas')"
      :class="{ 'component-selected': select === 'freeAtlas' }"
    />
    <!-- 热门图集 -->
    <CmsRecommendGrid
      :type="1"
      :title="'热门推荐'"
      @click="handleClick('hotAtlas')"
      :class="{ 'component-selected': select === 'hotAtlas' }"
    />
  </div>
</template>

<script setup lang="ts">
import CmsComponents from '@cms/components'
import type { ComponentKeys } from '@cms/h5-editor'

const { CmsCategoryGrid, CmsRecommendGrid, CmsVideoHeader } = CmsComponents

withDefaults(defineProps<{ type?: number; select?: ComponentKeys | undefined }>(), { type: 1 })

const emit = defineEmits<{
  (event: 'select', key: ComponentKeys): void
}>()

const handleClick = (key: ComponentKeys) => {
  emit('select', key)
}
</script>

<style scoped lang="less"></style>
